<mat-card class="option-panel">
  <mat-form-field>
    <mat-label>Position</mat-label>
    <mat-select (selectionChange)="onSelect($event.value)" [(value)]="selectedStations.stationId">
      <mat-option *ngFor="let station of stations" [value]="station.stationId">
        {{station.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</mat-card>

<mat-card class="sensor-panel">
  <div class="gauge-section">
    <h3>Temperature</h3>
    <div id="temperature" class="gauge"></div>
  </div>
  <div class="gauge-section">
    <h3>Humidity</h3>
    <div id="humidity" class="gauge"></div>
  </div>
  <div>
    <h3>Illuminance</h3>
    <div id="illuminance" class="gauge"></div>
  </div>
</mat-card>

<mat-card class="chart-panel">
  <div class="highchart" #tempChart>
    Oops! There are some errors when loading relative temperature...
  </div>
  <div class="highchart" #humiChart>
    Oops! There are some errors when loading relative humidities...
  </div>
  <div class="highchart" #luxChart>
    Oops! There are some errors when loading relative illuminance...
  </div>
</mat-card>